<template>
    <div class="photoCompareContainers">
        <componentSlider :options="sliderOptions">
            <div v-for="(image, index) in images" :key="index" class="imgDiv">
                <img :src="image" class="img">
            </div>
        </componentSlider>

    </div>
</template>
<script>
import componentSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'
export default {
    name: "photoCompare",
    components: { componentSlider },
    props: [],
    dicts: [

    ],
    data() {
        return {
            images: [
                'https://huangheban-1309368755.cos.ap-shanghai.myqcloud.com/upload/thumbnail_2024/10/18/1729217810632_data_result_pores_20241018101906A263.ydu',
                'https://huangheban-1309368755.cos.ap-shanghai.myqcloud.com/upload/thumbnail_2024/10/18/1729217810632_data_result_brown_20241018101908A264.ydu'
            ],
            sliderOptions: {
                mode: 'range',
                min: 0,
                max: 100,
                formatter: () => {
                    // 这里可以自定义滑块上显示的值
                    return '';
                }
            }
        }
    },
    mounted() {

    },
    methods: {

    },


}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.photoCompareContainers{
    height:70vh;
    .imgDiv{
        width:100%;
        height:60vh;
        .img{
            width:100%;
            height:100%;
        }
    }
}

</style>